<template>
  <div id="wf-base-info">
    <el-form ref="formRef" :inline-message="true" :model="wfBaseInfoSet" :rules="wfBaseInfoRules" label-position="left" label-width="110px">
      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item label="绑定表单" prop="form_file_name">
            <el-input clearable v-model="wfBaseInfoSet.form_file_name" placeholder="请手动输入待导入表单相对根目录的路径"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item label="流程编号" prop="wf_no">
            <el-input clearable v-model="wfBaseInfoSet.wf_no"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item label="流程名称" prop="wf_name">
            <el-input clearable v-model="wfBaseInfoSet.wf_name"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item label="流程版本" prop="wf_version">
            <el-input clearable v-model="wfBaseInfoSet.wf_version"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item label="备注">
            <el-input clearable type="textarea" :rows="5" v-model="wfBaseInfoSet.wf_remark"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item label="创建时间" prop="wf_created_time">
            <el-input readonly type="text" v-model="wfBaseInfoSet.wf_created_time"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item label="更新时间" prop="wf_updated_time">
            <el-input readonly type="text" v-model="wfBaseInfoSet.wf_updated_time"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between">
        <el-col :span="22">
          <el-form-item>
            <el-button type="primary" @click="fSaveWf">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {reactive, inject, toRefs, defineAsyncComponent} from 'vue'

export default {
  name: "WfDesignBaseInfoSet",
  components: {
    // 注册组件
  },
  props: {
    // propWf: {
    //   type: Object,
    //   default: {}
    // }
  },
  emits: ['fWfDesignSaveCallback'],

  setup(props, context) {
    const wfBaseInfoSet = inject('wfBaseInfoSet')
    const stateData = reactive({
      wfBaseInfoRules: {
        form_file_name: [
          {required: true, message: '由于js选择文件无法获取完整路径, 请手动输入表单文件名', trigger: 'change'},
        ],
        wf_no: [
          {required: true, message: '请输入流程编码', trigger: 'change'},
        ],
        wf_name: [
          {required: true, message: '请输入流程名称', trigger: 'change'},
        ],
        wf_version: [
          {required: true, message: '请输入流程版本', trigger: 'change'},
        ],
      }
    })

    // 选择业务表单
    const fSelectFormFile = () => {
      // console.log('选择业务表单')
      wfBaseInfoSet.form_file_name = ''
    }


    const fUploadFileChange = (uploadFile, uploadFiles) => {
      // const file = uploadFile.raw;
      // const reader = new FileReader();
      //
      // reader.onload = (e) => {
      //   console.log("e:",e)
      //   const fileContent = e.target.result;
      //   // 验证文件是否为 Vue 组件
      //   if (file.name.endsWith('.vue') && fileContent.includes('<template>') && fileContent.includes('</template>')) {
      //     // 创建一个 Blob 对象
      //     const blob = new Blob([fileContent], { type: 'text/plain' });
      //     // 创建一个临时 URL
      //     const url = URL.createObjectURL(blob);
      //     // 动态导入组件
      //     stateData.dynamicComponent = defineAsyncComponent(() => import(url));
      //     console.log('动态组件已导入:', stateData.dynamicComponent);
      //     // 释放临时 URL
      //     URL.revokeObjectURL(url);
      //   } else {
      //     console.error('选择的文件不是有效的 Vue 组件文件');
      //   }
      // };
      //
      // reader.readAsText(file);

    }
    const fSaveWf = () => {
      // 先执行 import() 确保加载完成
      // const module = await import(wfBaseInfoSet.form_file_name)
      console.log('module:', module)

      context.emit('fWfDesignSaveCallback')
    }


    return {
      ...toRefs(stateData),
      wfBaseInfoSet,
      fSelectFormFile,
      fUploadFileChange,
      fSaveWf,
    }
  }
}
</script>

<style scoped>
.upload-style {
  height: 30px;
  background: #409eff;
}
</style>